<template>
  <div class="global-params" :class="{ compact: compact }">
    <el-form :model="localParams" :label-width="compact ? '70px' : '120px'" :size="compact ? 'small' : 'default'">
      <!-- 画布设置 -->
      <div class="param-section">
        <h4 class="section-title">
          <el-icon><Monitor /></el-icon>
          画布设置
        </h4>

        <el-row :gutter="compact ? 12 : 24">
          <!-- 画布尺寸 -->
          <el-col :span="8">
            <el-form-item label="宽度">
              <el-input-number
                  v-model="localParams.canvas_width"
                  :min="480"
                  :max="3840"
                  :step="1"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高度">
              <el-input-number
                  v-model="localParams.canvas_height"
                  :min="480"
                  :max="3840"
                  :step="1"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 常用预设尺寸 -->
        <div class="size-presets" v-if="!compact">
          <!-- 画布预设 -->
          <el-col :span="24">
            <el-form-item label="画布预设">
              <div class="preset-buttons">
                <el-button
                    v-for="preset in canvasPresets"
                    :key="preset.key"
                    :type="isPresetActive(preset) ? 'primary' : 'default'"
                    @click="applyPreset(preset)"
                >
                  {{ preset.label }}
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </div>
      </div>

      <!-- 数字人设置 -->
      <div class="param-section">
        <h4 class="section-title">
          <el-icon><User /></el-icon>
          数字人设置
        </h4>

        <el-row :gutter="compact ? 12 : 20">
          <el-col :span="compact ? 24 : 6">
            <el-form-item label="缩放">
              <div class="slider-container">
                <el-slider
                    v-model="localParams.video_scale"
                    :min="0.1"
                    :max="3.0"
                    :step="0.1"
                    :show-input="true"
                    @change="handleParamChange"
                    @input="handleSliderInput"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="compact ? 12 : 6">
            <el-form-item label="水平位置">
              <el-input-number
                  v-model="localParams.video_x"
                  :min="-1000"
                  :max="1000"
                  :step="10"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>
          <el-col :span="compact ? 12 : 6">
            <el-form-item label="垂直位置">
              <el-input-number
                  v-model="localParams.video_y"
                  :min="-1000"
                  :max="1000"
                  :step="10"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>

          <el-col :span="compact ? 12 : 6">
            <el-form-item label="保持比例">
              <el-switch
                  v-model="localParams.keep_human_ratio"
                  active-text="保持"
                  inactive-text="拉伸"
                  @change="handleParamChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 背景设置 -->
      <div class="param-section">
        <h4 class="section-title">
          <el-icon><Picture /></el-icon>
          背景设置
        </h4>

        <el-row :gutter="compact ? 12 : 20">
          <el-col :span="compact ? 24 : 6">
            <el-form-item label="缩放">
              <div class="slider-container">
                <el-slider
                    v-model="localParams.bg_scale"
                    :min="0.1"
                    :max="3.0"
                    :step="0.1"
                    :show-input="true"
                    @change="handleParamChange"
                    @input="handleSliderInput"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="compact ? 12 : 6">
            <el-form-item label="水平位置">
              <el-input-number
                  v-model="localParams.bg_x"
                  :min="-1000"
                  :max="1000"
                  :step="10"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>
          <el-col :span="compact ? 12 : 6">
            <el-form-item label="垂直位置">
              <el-input-number
                  v-model="localParams.bg_y"
                  :min="-1000"
                  :max="1000"
                  :step="10"
                  @change="handleParamChange"
                  :controls="false"
              />
              <small class="param-hint">px</small>
            </el-form-item>
          </el-col>

          <el-col :span="compact ? 12 : 6">
            <el-form-item label="保持比例">
              <el-switch
                  v-model="localParams.keep_bg_ratio"
                  active-text="保持"
                  inactive-text="拉伸"
                  @change="handleParamChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 快速操作 -->
      <div class="param-section" v-if="!compact">
        <h4 class="section-title">
          <el-icon><MagicStick /></el-icon>
          快速操作
        </h4>

        <div class="quick-actions">
          <el-button-group size="small">
            <el-button @click="resetHumanPosition">重置人物</el-button>
            <el-button @click="resetBackgroundPosition">重置背景</el-button>
            <el-button @click="resetAllScales">重置缩放</el-button>
          </el-button-group>
          <el-button @click="resetAllParams" type="warning" size="small" style="margin-left: 10px;">
            重置全部
          </el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      canvas_width: 1080,
      canvas_height: 1920,
      output_format: 'mp4',
      video_scale: 0.6,
      video_x: 0,
      video_y: 400,
      bg_scale: 1.0,
      bg_x: 0,
      bg_y: 0,
      keep_human_ratio: true,
      keep_bg_ratio: false
    })
  },
  compact: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

// 响应式数据
const localParams = ref({})
const isUpdating = ref(false) // 防止递归更新的标志

// 初始化本地参数
const initLocalParams = () => {
  localParams.value = { ...props.modelValue }
}

// 画布预设
const canvasPresets = [
  { key: 'douyin_v', label: '抖音竖屏', width: 1080, height: 1920 },
  { key: 'douyin_h', label: '抖音横屏', width: 1920, height: 1080 },
  { key: 'weixin_v', label: '微信竖屏', width: 720, height: 1280 },
  { key: 'weixin_h', label: '微信横屏', width: 1280, height: 720 },
  { key: 'bilibili_v', label: 'B站竖屏', width: 1080, height: 1920 },
  { key: 'bilibili_h', label: 'B站横屏', width: 1920, height: 1080 },
  { key: 'square', label: '方形', width: 1080, height: 1080 },
  { key: '4:3', label: '4:3', width: 1200, height: 1600 },
]

const isPresetActive = (preset) => {
  return localParams.value.canvas_width === preset.width &&
      localParams.value.canvas_height === preset.height
}

const applyPreset = (preset) => {
  localParams.value.canvas_width = preset.width
  localParams.value.canvas_height = preset.height
  emitUpdate()
}

// 监听props变化
watch(() => props.modelValue, (newVal) => {
  if (newVal && !isUpdating.value) {
    isUpdating.value = true
    nextTick(() => {
      localParams.value = { ...newVal }
      isUpdating.value = false
    })
  }
}, { immediate: true, deep: true })

// 通用的参数变化处理函数
const handleParamChange = () => {
  if (!isUpdating.value) {
    emitUpdate()
  }
}

// 滑块输入处理（只触发change事件，不触发update）
const handleSliderInput = () => {
  if (!isUpdating.value) {
    emit('change', { ...localParams.value })
  }
}

// 发出更新事件
const emitUpdate = () => {
  const newValue = { ...localParams.value }
  emit('update:modelValue', newValue)
  emit('change', newValue)
}

const setCanvasSize = (width, height) => {
  if (isUpdating.value) return

  localParams.value.canvas_width = width
  localParams.value.canvas_height = height
  emitUpdate()
  ElMessage.success(`画布尺寸已设置为 ${width}×${height}`)
}

const resetHumanPosition = () => {
  if (isUpdating.value) return

  localParams.value.video_x = 0
  localParams.value.video_y = 400
  localParams.value.video_scale = 0.6
  emitUpdate()
  ElMessage.success('人物位置已重置')
}

const resetBackgroundPosition = () => {
  if (isUpdating.value) return

  localParams.value.bg_x = 0
  localParams.value.bg_y = 0
  localParams.value.bg_scale = 1.0
  emitUpdate()
  ElMessage.success('背景位置已重置')
}

const resetAllScales = () => {
  if (isUpdating.value) return

  localParams.value.video_scale = 0.6
  localParams.value.bg_scale = 1.0
  emitUpdate()
  ElMessage.success('所有缩放已重置')
}

const resetAllParams = () => {
  if (isUpdating.value) return

  localParams.value = {
    canvas_width: 1080,
    canvas_height: 1920,
    output_format: 'mp4',
    video_scale: 0.6,
    video_x: 0,
    video_y: 400,
    bg_scale: 1.0,
    bg_x: 0,
    bg_y: 0,
    keep_human_ratio: true,
    keep_bg_ratio: false
  }
  emitUpdate()
  ElMessage.success('所有参数已重置为默认值')
}

// 初始化
initLocalParams()
</script>

<style lang="scss" scoped>
.global-params {
  ::v-deep(.el-input-number){
    width: auto !important;
  }

  &.compact {
    .param-section {
      margin-bottom: 16px;
      padding: 12px;
    }

    .section-title {
      margin: 0 0 12px 0;
      font-size: 14px;
      padding-bottom: 6px;
    }

    .el-form-item {
      margin-bottom: 12px;
    }

    .slider-container {
      .el-slider {
        .el-slider__input {
          width: 70px;
        }
      }
    }
  }

  .param-section {
    margin-bottom: 24px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    margin: 0 0 16px 0;
    color: #303133;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 8px;
  }

  .param-hint {
    color: #909399;
    font-size: 11px;
    margin-left: 6px;
  }

  .size-presets {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    gap: 8px;

    .preset-label {
      color: #606266;
      font-size: 13px;
      white-space: nowrap;
    }
  }

  .quick-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .slider-container {
    width: 100%;

    .el-slider {
      margin-right: 0;

      ::v-deep(.el-slider__input) {
        width: 120px;
      }
    }
  }

  ::v-deep(.el-form-item) {
    margin-bottom: 16px;

    .el-form-item__label {
      color: #606266;
      font-weight: 500;
      font-size: 13px;
    }

    .el-form-item__content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }
  }

  ::v-deep(.el-input-number) {
    width: 100%;

    .el-input__inner {
      text-align: center;
    }
  }

  ::v-deep(.el-select) {
    width: 100%;
  }

  ::v-deep(.el-switch) {
    .el-switch__label {
      font-size: 12px;
    }
  }
}
</style>